<template>
    <!-- <div class="authority-list-item" :class="['list-item_'+ model.level + '_' + index]" v-show="authorShow || model.checkEnabled">
        <div class="ahthority-label" :class="['tree_' + model.level]">
            <el-checkbox v-model="model.checked" :disabled="model.disabled" :value="model.id" @change="change(model, $event)">{{model.menuName}}</el-checkbox>
        </div>
        <div class="child" id="model.id" :class="{'has-child': model.children.length,'default-style': model.children.length==0}">
            <tree-author v-for="(item,index) in model.children" 
                :key="index"
                :model="item"
                :index="index"
                >
            </tree-author>
        </div>
    </div> -->
    <div class="authority-list-item" :id="'treeLevel_' + model.id +'_'+ index" :class="['list-item_'+ model.level + '_' + index]" v-show="authorShow || model.checkEnabled">
        <!-- <div class="ahthority-label" :class="['tree_' + model.level]" :id="'treeLevel_' + model.id">
            <el-checkbox v-model="model.checked" :disabled="model.disabled" :value="model.id" @change="change(model, $event)">{{model.menuName}}</el-checkbox>
        </div> -->
        <div class="ahthority-label" :class="['tree_' + model.level]">
            <template v-if="!noticeNav(model)">
                <el-checkbox v-model="model.checked" :disabled="model.disabled"  :value="model.id" @change="change(model, $event)">{{model.menuName}}</el-checkbox>
            </template>
            <template v-else>
                <el-checkbox v-model="model.checked" :disabled="noticeChecked"  :value="model.id">{{model.menuName}}</el-checkbox>
            </template>
        </div>
        
        <div class="child" :id="'tree_'+model.id" v-show="isShowMenu(model.id)" :class="{'has-child': model.children.length,'default-style': model.children.length==0}">
            <tree-author v-for="(item,index) in model.children" 
                :key="index"
                :model="item"
                :index="index"
                >
            </tree-author>
        </div>
    </div>
</template>
<script>
export default {
    name: 'treeAuthor',
    props: {
        model: {
            type: Object,
            default() {
                return {}
            }
        },
        // 传递过来的值
        index: {
            type: Number,
            default: 0
        } 
    },
    computed: {
        authorShow() {
            return this.$route.name == '查看权限' ? true : false;
        }
    },
    data() {
        return {
            checked: false,
            flag: false,
            flag1: false,
            childChecked: false, // 子集选中的状态
            intNoticeList: ['2001', '2002', '2003', '2004', '2005', '2006', '2007', '2008', '2009', '2010', '2011'],
            hideMenuData: ['2002', '2013', '2016', '2021', '2026', '2027', '2032', '2036', '2039', '2139', '2048', '2052', '2056', '2057', '2058', '2059', '2064', '2067', '2066', '2069', '2071', '2072', '2077', '2073', '2082', '2083', '2087', '2088', '2090', '2093', '2094', '2098', '2099', '2104', '2105', '2110', '2115', '2132', '2136', '2139', '2137', '2143', '2149', '2150', '2151', '2154', '2158', '2173', '2176', '2175', '2177', '2183', '2212', '2221', '2189', '2192', '2195', '2199', '2202', '2205', '2227', '2255', '2249', '2263', '2243', '2237', '2230', '2216', '2225', '2253'],
            noticeChecked: true
        }
    },
    methods: {
        noticeNav(model) {
            // console.log(id);
            // console.log(this.intNoticeList.indexOf(id) > -1);
            return this.intNoticeList.indexOf(model.id) > -1 && (model.checked = true);
        },
        isShowMenu(id) {
            return !(this.hideMenuData.indexOf(id) > -1);
        },
        change(model, e) {
            this.getAllParent(model);
            this.isParentCheck(this.$parent);     
            this.getAllChildren(model);   
            this.childChecked = false;
        },
        // 获取所有父级选中状态
        getAllParent(parent) {
            this.isParentCheck(parent);
        },
        // 判断是否父级选中状态
        isParentCheck(parent) {
            if (parent.model) {               
                var parentChildren = parent.model.children;
                this.flag1 = false; 
                for (var i = 0; i < parentChildren.length; i++) {
                    var cur = parentChildren[i];
                    if (cur.checked) {
                        this.flag1 = true;
                        break;
                    }
                }
                // parent.model.checked = this.flag1;
            }
            if (parent.model) {
                this.$nextTick(() => {
                    var parentChild = parent.model.children;
                    this.flag1 = false;
                    for (var j = 0; j < parentChild.length; j++) {
                        var curP = parentChild[j];
                        if (curP.checked) {
                            this.flag1 = true;
                        }
                    }
                    parent.model.checked = this.flag1;
                })
            }
            // this.getChildCheck(parent);
            if (parent.$parent) {
                this.isParentCheck(parent.$parent);
            }
        },
        // 获取所有子集的状态
        getChildCheck(model) {
            if (parent.model) {               
                var parentChildren = parent.model.children;
                this.flag = false; 
                for (var i = 0; i < parentChildren.length; i++) {
                    var cur = parentChildren[i];
                    if (cur.checked) {
                        this.flag = true;
                    }
                }
                parent.model.checked = this.flag;
            }
            if (parent.model) {
                parent.model.checked = this.flag;
            }

        },
        // 获取子集的状态
        getChild(model) {
            if (model.children) {   
                model.children.forEach(item => {
                    if (!item.checked&&item.checkEnabled) {
                        this.childChecked = true;
                    }
                    if (item.children.length > 0) {
                        this.getChild(item);
                    }
                });
            }
            if (this.childChecked == true) {
                model.checked = this.childChecked;
            }    
            this.deleteChecked(model, this.childChecked)
        },
        // 获取所有子集
        getAllChildren(model) {
            this.getChild(model)
        },
        // 删除子级状态
        deleteChecked(model) {
            if (model.children) {
                model.children.forEach(item => {
                    item.checked = item.checkEnabled && model.checked;
                    if (item.children) {
                        this.deleteChecked(item);
                    }
                });
            }
            this.getChildCheck(this.$parent);
        }
    }
}
</script>
<style lang="scss">
// border-color
  $border-color: #ebebeb;
  .authority-list-wrapper {
    // width: 600px;
    min-width: 880px;
    max-width: 1200px;
    margin-left: 24px;
    margin-bottom: 20px;
    overflow: hidden;
    .authority-list-item {
      display: flex;
      margin-bottom: 19px;
      border: 1px solid $border-color;
        .child{  
            width: auto;
            >.authority-list-item {
                border: none;
                margin-bottom: 0;
                >.tree_2::first-of-type {
                    border-top: none;
                }
            }
        }
        .child.has-child {
            border-left: 1px solid $border-color;
        }
        .ahthority-label {
            width: 300px;
            height: 40px;
            padding: 12px 18px;
            border-top: 1px solid  $border-color;
        }
        .ahthority-label.tree_1 {
            border-top: none;

        }
        .border-none {
            border: none;
        }
        .default-style {
            // width: 220px;
            height:40px;
            border-top: 1px solid $border-color;
            // border-left: 1px solid $border-color;

        }
        .tree_1 ~ .default-style {
            border: none;
        }
        .tree_3 ~ .default-style{
            // ------------cm
            width: 300px;
            height: 40px;
            border-top: 1px solid $border-color;
        }

        .list-item_2_0 .tree_2, .list-item_2_0 .tree_3, .list-item_2_0 .default-style{
            border-top: none;
        }  
    }
    .list-item_1_5 {
        // .list-item_3_1 {
        //     .tree_3 {
        //         border-top: 1px solid $border-color;
        //     }
        //     border-bottom: 1px solid $border-color;
        // }
        .child {
            .list-item_2_0 {
                .child {
                    .list-item_3_1 {
                        .tree_3 {
                            border-top: 1px solid $border-color;
                        }
                        border-bottom: 1px solid $border-color;
                    }
                    .list-item_3_3 {
                        border-top: 1px solid $border-color;
                    }
                }
            }
        }
    }
    .ahthority-label.has-child {
      border-bottom: none;
    }
  }
  #tree_2012, #tree_2068, #tree_2076{
      border-right: 1px solid $border-color;
  }
  #treeLevel_2048_0, #treeLevel_2055_1, #treeLevel_2056_2, #treeLevel_2058_3, #treeLevel_2136_3, #treeLevel_2139_2, #treeLevel_2147_2, #treeLevel_2148_4, #treeLevel_2154_5, #treeLevel_2172_5, #treeLevel_2173_2, #treeLevel_2175_3, #treeLevel_2087_1, #treeLevel_2090_2, #treeLevel_2093_3, #treeLevel_2098_4, #tree_2131, #tree_2135, #treeLevel_2123_1, #treeLevel_2128_2, #treeLevel_2036_4, #treeLevel_2237_2{
      border-bottom: 1px solid $border-color;
  }
  #tree_2120 .tree_3 {
      border-top: 1px solid $border-color;
  }
  #tree_2127,#tree_2128 {
      border-left: 1px solid $border-color;
  }
  #treeLevel_2058_3 .tree_2 , #treeLevel_2066_4 .tree_2, #treeLevel_2071_1 .tree_2, #treeLevel_2073_2 .tree_2, #treeLevel_2175_3 .tree_2, #treeLevel_2177_4 .tree_2, #treeLevel_2158_6 .tree_2, #treeLevel_2154_5 .tree_2, #treeLevel_2129_3 .tree_3, #treeLevel_2128_2 .tree_3, #treeLevel_2142_3 .tree_2, #treeLevel_2143_0 .tree_3, #treeLevel_2166_1 .tree_2, #treeLevel_2122_0 .tree_2, #treeLevel_2122_0 .tree_3, #treeLevel_2154_4 .tree_2, #treeLevel_2158_5 .tree_2 {
      border-top: none;
  }
  #tree_2071, #tree_2079, #tree_2081, #tree_2109, #tree_2188, #tree_2198{
      border-right: 1px solid $border-color;
  }
  #treeLevel_2124_1 .tree_3 {
      border-top: 1px solid $border-color;
  }
  #tree_2182,#treeLevel_2115_1, #treeLevel_2211_2, #tree_2187, #treeLevel_2227_4, #treeLevel_2148_3, #treeLevel_2154_4, #treeLevel_2110_0, #treeLevel_2212_6, #treeLevel_2216_7, #tree_2248, #treeLevel_2263_6, #treeLevel_2267_4, #treeLevel_2186_0, #treeLevel_2255_1, #treeLevel_2221_10{
      border-bottom: 1px solid $border-color;
  }
  #treeLevel_2104_5, #treeLevel_2077_0, #treeLevel_2081_1 {
      border-bottom: 1px solid $border-color;
  }
</style>

